<template>
  <div class="mb-2">{{ editorTitle }}</div>
  <div class="flex flex-col items-start gap-3">
    <div class="flex items-center gap-3">
      <div>评分辅助文本</div>
      <el-switch :model-value="isUse" @change="changeIsUse" />
    </div>

    <div class="flex flex-col items-start gap-3">
      <div>辅助文本设置</div>
      <div class="flex flex-col items-start gap-2">
        <template v-for="(item, index) in status" :key="index">
          <el-input
            v-model="inputValues[index]"
            placeholder="请输入辅助文本"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
import type { IUpdateStatus } from "@/types/common";
import type { IStringStatusArr } from "@/types";

const props = defineProps<{
  id: string;
  status: IStringStatusArr;
  isShow: boolean;
  name: string;
  statusKey: string;
  editCom: Component;
  editorTitle: string;
  currentStatusIndex: number;
  isUse: boolean;
}>();

const updateStatus = inject("updateStatus") as IUpdateStatus;

// - 是否使用
const isUse = computed(() => props.isUse);

const inputValues = ref<string[]>(props.status);

const changeIsUse = (val: string | number | boolean) => {
  updateStatus(props.statusKey, val as boolean);
};
</script>

<style scoped></style>
